<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性与样式</title>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<style type="text/css">
img{border:1px solid #aaa; margin: 3px ; padding: 3px}
</style>

<script type="text/javascript">
	// 定义函数
	function changeImg(){
		//  获取图片
		var img = document.getElementById("img");
		if(img.src.indexOf("pic_bulbon.gif") > -1 ){
			img.src='images/pic_bulboff.gif' ;
		} else {
			img.src='images/pic_bulbon.gif' ;
		}
	}
	
	// 全局变量 ==》 srcipt
	var index = 1;
	// 图片顺序切换
	function btn1(){
		// 局部变量  ==》 函数
		//var index2 = 2;
		//if(a == 100 ){
			// 块级变量  ==》 let 只在当前代码块中有效
			//let index3 = 3;
		//}
		index ++;
		if(index > 6 ){
			index = 1;
		}
		// 元素的id值可以当成 变量使用
		img1.src = index < 5  
				? ( "images/表情包/0"+index+".jpg" ) 
				: ( "images/表情包/0"+index+".gif" );  // 三元表达式
		
	}
	
	// 图片随机切换
	function btn2(){
		// index 取随机值
		index = Math.random() * 6;  // 0~1  浮点数
		index ++;   // 1.212341234124
		index = Math.floor(index);   // 向下取整
		// 调用 btn1 方法
		btn1();
	}
	
	// 定时器的返回值
	var handler;
	function btn3(){
		// 启动定时任务
		if( handler ){
			// 如果定时器不为空， 停止定时任务
			clearInterval(handler);
		} else {
			// 如果定时器不为空 , 启动定时任务
			handler = setInterval( btn1, 1000 ); // js 的函数可以作为一个变量使用
		}
	}
	
</script>



</head>
<body>
	<div class="layui-main">
	<h2>点击灯泡实现开关灯</h2>
													<!-- 鼠标点击事件监听 -->
	<img id="img" src="images/pic_bulboff.gif" onclick="  changeImg() ">
	
	<hr>
	<h2>实现图片切换</h2>
	<img id="img1" src="images/表情包/01.jpg">
	<br>
	<img src="images/表情包/01.jpg" height="50px">
	<img src="images/表情包/02.jpg" height="50px">
	<img src="images/表情包/03.jpg" height="50px">
	<img src="images/表情包/04.jpg" height="50px">
	<img src="images/表情包/05.gif" height="50px">
	<img src="images/表情包/06.gif" height="50px">
	<br><br>
	<button ondblclick="btn1()" class="layui-btn layui-btn-radius layui-btn-normal">图片顺序切换</button>
	<button onclick="btn2()" class="layui-btn layui-btn-radius layui-btn-normal">图片随机切换</button> <a href="https://www.w3school.com.cn/jsref/jsref_random.asp">参考：随机函数</a>
	<button onclick="btn3()" class="layui-btn layui-btn-radius layui-btn-normal">图片自动切换</button> <a href="https://www.w3school.com.cn/jsref/met_win_setinterval.asp">参考：定时器</a><br>
	
	<hr>
	<h2>修改超链接</h2>
	<h1 style="margin: 10px;font-weight: 900;">
		<a id="a">超链接</a>
	</h1>
	<button onclick="btn4()" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">修改“超链接”为“淘宝”，并实现跳转到淘宝</button>
	<button onclick="btn5()" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">修改“超链接”为京东图片，并实现跳转到京东</button>
	<button onclick="btn6()" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">修改超链接的字体绿底白字</button>
	<button onclick="btn7()" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">给超链接加一个蓝色的边框，并且边框颜色交替变化</button>
	
	<hr>
	<h3>参考</h3>
	<ol>
		<li>
			<a href="https://www.cnblogs.com/xiaozhou223/p/11184238.html">JavaScript获取页面元素的常用方法</a>
		<li>
			<a href="https://www.jb51.net/article/71603.htm">javascript 动态修改css样式方法汇总(四种方法)</a>
		<li>
			<a href="https://www.w3school.com.cn/tags/att_a_target.asp">HTML &lt;a> 标签的 target 属性</a>
	</ol>
	</div>
	
	<script type="text/javascript">
		function btn4(){
			// js 的字符串可以用 单引号和双引号表示
			a.innerText = "淘宝";
			a.href = "http://taobao.com";
			a.target = "_blank" ;// 开启新的标签页，打开淘宝
		}
		
		function btn5(){
			// js 的字符串可以用 单引号和双引号表示
			a.innerHTML = "<img src='images/jd.jpg'>";
			a.href = "http://jd.com";
			a.target = "_blank" ;// 开启新的标签页，打开京东
		}
		
		function btn6(){
			// js 对于多单词属性 ==》 驼峰命名
			a.style.backgroundColor="green";
			// 中括号操作符 ==》 js 扩展，可以操作对象属性
			a.style["background-color"]="green";
			a.style.color = "#fff";
		}
		
		//顺哥
		function btn7(){
			a.style.border = "solid";
			a.style.borderColor = "blue";
			//颜色数组
			var colorList = ["blue","yellow","red","green","pick"];
			function colorrandom(){
				var clindex = Math.floor(Math.random()*colorList.length);
				var color  = colorList[clindex];
				//colorList.splice(clindex,1);
				return color;
			}
			function func(){
			  a.style.borderColor=colorrandom(colorList);
			}
			 //定时器循环边框颜色
			 setInterval(func,1000);
		}
		
	</script>
	
</body>
</html>